import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Steps, Button } from 'antd';
import router from 'umi/router';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Result from '@/components/Result';
import downloadFile, { urlParse } from '@/utils/utils';

const { Step } = Steps;

@connect(({ quoupdate, loading }) => ({
  loading: loading.models.quoupdate,
  getBatchId: quoupdate.getBatchId,
}))
@Form.create()
class SelectSteps extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quoState: '',
      batchNo: '',
      updateInfo: {
        total: 0, // 总数
        sendStatus1: 0, // 入职办理中
        sendStatus2: 0, // 在职
        sendStatus3: 0, // 取消入职
        sendStatus4: 0, // 离职办理中
        sendStatus5: 0, // 已离职
        other: 0, // 支出或申报数据
      },
    };
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { quoState, batchNo } = urlParse(location.search);
    this.setState({
      quoState,
      batchNo,
    });
    if (quoState === '2') {
      // 查看结果页的信息
      dispatch({
        type: 'quoupdate/getFinishData',
        payload: { batchNo },
      }).then(res => {
        this.setState({
          updateInfo: { ...res.data },
        });
      });
    }
  }

  // 下载所有数据
  allDownloadInfo = () => {
    const { getBatchId } = this.props;
    const { batchNo } = this.state;
    const params = {
      cacheKey: getBatchId,
      batchId: batchNo,
    };
    downloadFile(params, '/csApi/sendempchangeQuo/exportAllExcel', 'POST');
  };

  // 返回列表
  goBack = () => {
    router.push('/salemanage/quotation/index');
  };

  render() {
    const { quoState, updateInfo } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <Steps current={quoState === '1' ? 2 : 3} style={{ marginBottom: 70 }}>
            <Step title="选择产品" />
            <Step title="设置价格" />
            {quoState === '2' || quoState === '3' ? <Step title="人员信息" /> : null}
            <Step title="完成" />
          </Steps>
          <Result type="success" title="操作成功" />
          {quoState === '2' ? (
            <div style={{ marginTop: '50px', marginBottom: '30px', textAlign: 'center' }}>
              <p>
                此次修改涉及 {updateInfo.total || 0} 人； 其中入职办理中
                {updateInfo.sendStatus1 || 0}
                人，在职
                {updateInfo.sendStatus2 || 0} 人，离职人数 {updateInfo.sendStatus4 || 0} 人；
                <br />
                其中有 {updateInfo.other || 0} 人存在支出或申报数据，生效年月自动后延；
              </p>
              <p />

              <a onClick={this.allDownloadInfo} style={{ zIndex: 88 }}>
                下载所有数据
              </a>
            </div>
          ) : null}
          <div style={{ marginTop: '50px', marginBottom: '30px', textAlign: 'center' }}>
            <Button size="large" type="primary" onClick={() => this.goBack()}>
              完成
            </Button>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default SelectSteps;
